<template>
  <div class="upgradeMode">
    <p class="center caption">{{ $t('renew.upgradeType') }}</p>
    <div class="flexb">
      <div v-for="(item, index) in activeList"
        :key="index"
        class="tab"
        :class="{'changeClass': index === active}"
        @click="handleChangeActive(index)"
        >
        {{ $t(`renew.${item.label}`) }}
      </div>
    </div>
    <p class="modeTip" v-if="active && vipMode === 0">{{ $t('renew.tipReplace2') }}</p>
    <div class="modeTip"  v-if="active === 0 && selfStaked && user.vipMode === 1">
      <el-checkbox v-model="checked" class="mr5"></el-checkbox>{{ $t('renew.tipReplace',{num: toFixed(selfStaked, 4)}) }}
    </div>
    <el-button type="primary" class="btn" @click="handleComfirm" v-loading="loading">
      {{ $t('public.sure') }}
    </el-button>
  </div>
</template>

<script>
import { EosModel } from '@/utils/eos/index';
import { toFixed } from '@/utils/validate';

export default {
  name: 'upgradeMode', // 升级方式
  data() {
    return {
      active: 0,
      activeList: [
        {
          value: 0,
          label: 'consumeNDX',
        },
        {
          value: 1,
          label: 'stakeNDX'
        }
      ],
      checked: false,
      loading: false
    }
  },
  components: {},
  props: {
    user: Object,
    vipMode: Number,
    upgradeModeHide: Boolean,
    myStakeNdxALL: Number,
    selfStaked: Number,
  },
  watch: {
    upgradeModeHide: function change(val) {
      if (val) {
        this.loading = false;
        this.active = this.vipMode;
        this.checked = false;
      }
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.active = this.vipMode;
  },
  beforeDestroy() {},
  methods: {
    // tab 切换
    handleChangeActive(index) {
      this.active = index;
    },
    // 确认更换
    handleComfirm() {
      if (this.vipMode === this.active) {
        this.$emit('listenUpgradeMode', 'close');
        return;
      }
      // 更换 / 赎回
      this.handleNewdexStakexChange();
    },

    // NDX 抵押stake / 赎回unstake --- Action
    handleStakeAction() {
      // const n = this.myStakeNdxALL;
      const n = this.selfStaked;
      const params = {
        quantity: `${toFixed(n, 4)} NDX`,
        name: 'unstake',
        chain: 'eos',
        stakeAccount: this.user.account
      };
      this.loading = true;
      EosModel.newdexStakex(params, (res) => {
        let messageclose = null;
        const msg = `${this.$t('ndxStake.redeemSuccess')}，正在更换方式...`;
        if (res.processed) { // 合约操作成功
          messageclose = this.$message.success(msg);
          // 执行更换
          this.handleNewdexStakexChange(messageclose)
          return
        }
        EosModel.handleScatterErrorBack(res);
      })
    },

    // 执行更换
    handleNewdexStakexChange(messageclose) {
      const n = this.selfStaked;
      const params = {
        model: this.active,
        quantity: `${toFixed(n, 4)} NDX`,
        name: 'unstake',
        chain: 'eos',
        stakeAccount: this.user.account,
        checked: this.checked
      }
      this.loading = true;
      EosModel.newdexStakexChange(params, (res) => {
        this.loading = false;
        if (res.processed) { // 合约操作成功
          if (messageclose) {
            messageclose.close();
          }
          this.$message.success(this.$t('newpos.successfulOperation'));
          this.$emit('listenUpgradeMode', 'sure');
          return
        }
        EosModel.handleScatterErrorBack(res);
      });
    },
    // 数字截取 - 保留小数
    toFixed(num, p) {
      return toFixed(num, p);
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/views/myWallet/member/privilege/public.scss';
.upgradeMode {
  color: #333;
  padding: 0 30px 20px;

  .caption {
    margin-bottom: 20px;
  }

  .tab {
    width: 150px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: 1px solid #BBBBBB;
    border-radius: 5px;
    cursor: pointer;
    // color: $-changeColor;

    &.changeClass {
      color: $-changeColor;
    }
  }

  .modeTip {
    margin-top: 18px;
  }

  .btn {
    width: 100%;
    background: linear-gradient(to top, #EDC16C , #F9DB75);
    color: #8B572A;
    margin-top: 40px;
    border: none;
  }
}

.theme-1B1D27 {
  .upgradeMode {
    color: rgba(255, 255, 255, 0.8) !important;
  }
}
</style>

